<template>
	<view>
		<top-navigation :isFix="false" bgColor="#fff">
			<template #center-slot>
				<view style="font-size: 28rpx;font-weight: 600;color:#000;">索引列表基本实现</view>
			</template>
		</top-navigation>
		<alphabetic-list ref="alphabeticList" :scrollToHeight="calculateHeight">
			<template #content>
				<view class="block-letters" v-for="(value, key, letter) in letterList" :key="letter">
					<block v-if="value.length > 0">
						<text class="letter-text" :id="key" :ref="key">{{ key }}</text>
						<view class="brand-name" v-for="(item, index) in value" :key="index">{{ item.name }}</view>
					</block>
				</view>
			</template>
		</alphabetic-list>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				letterList: [], //处理后的数据表
			}
		},
		mounted() {
			if (uni.getStorageSync('cityInfo')) {
				this.parse(uni.getStorageSync('cityInfo'))
			} else {
				this.getCity()
			}
		},
		computed: {
			calculateHeight() {
				return `calc(${this.screenHeight}px - ${this.statusHeight}px`
			}
		},
		methods: {
			async getCity() {
				const params = {
					level: 2
				}
				const {
					data
				} = await this.$request('/common/city/getCity', params)
				uni.setStorageSync('cityInfo', data)
				this.parse(data)
			},
			parse(data) {
				this.letterList = this.$refs.alphabeticList.format(data, 'city')
			},
		}

	}
</script>
<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.block-letters {
		.letter-text {
			width: 750rpx;
			height: 75rpx;
			padding-left: 36rpx;
			display: flex;
			align-items: center;
			background: $uni-bg-color-grey;
		}

		.brand-name {
			height: 120rpx;
			padding: 0rpx 36rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 32rpx;
			border-bottom: 1rpx solid #fafafa;
			background: $uni-bg-color;

			.head-portrait {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				margin: 0rpx 20rpx;
				background-color: #aaaaaa;
			}

			.check {
				width: 35rpx;
				height: 35rpx;
				border-radius: 100rpx;
				border: 3rpx solid #cbcbcb;
				box-sizing: border-box;
			}

			.uncheck {
				width: 35rpx;
				height: 35rpx;
				border-radius: 100rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
